<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的订单 - AI简历生成应用</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-50 pb-20 pt-28">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow fixed top-0 left-0 right-0 z-10">
      <div
        class="h-14 flex items-center justify-center relative px-4 max-w-md mx-auto"
      >
        <a href="index.html" class="absolute left-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-600"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15 19l-7-7 7-7"
            />
          </svg>
        </a>
        <h1 class="text-lg font-medium">我的订单</h1>
      </div>
    </div>

    <!-- 订单类型选项卡 -->
    <div class="bg-white shadow-sm fixed top-14 left-0 right-0 z-10">
      <div class="flex text-center max-w-md mx-auto">
        <div class="flex-1 py-3 relative order-tab active" data-tab="all">
          <span class="text-purple-600 font-medium">全部</span>
          <div
            class="absolute bottom-0 left-1/4 right-1/4 h-0.5 bg-purple-600 rounded-full"
          ></div>
        </div>
        <div class="flex-1 py-3 relative order-tab" data-tab="pending">
          <span class="text-gray-600">待付款</span>
        </div>
        <div class="flex-1 py-3 relative order-tab" data-tab="completed">
          <span class="text-gray-600">已完成</span>
        </div>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="px-4 mt-4" id="order-list">
      <!-- 订单项 1 -->
      <div
        class="bg-white rounded-xl shadow p-4 mb-4 order-item"
        data-type="completed"
      >
        <div class="flex justify-between items-center mb-3">
          <div class="text-sm text-gray-500">订单号: 2023052601</div>
          <div class="text-sm text-emerald-500 font-medium">已完成</div>
        </div>
        <div class="flex items-start">
          <div
            class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-7 w-7 text-purple-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
              />
            </svg>
          </div>
          <div class="flex-1">
            <h3 class="text-base font-medium text-gray-900">简历基础优化</h3>
            <p class="text-sm text-gray-600 mt-1">
              AI自动优化简历内容，提升简历质量
            </p>
            <div class="flex justify-between items-center mt-2">
              <div class="text-sm text-gray-500">2023-05-26 14:30</div>
              <div class="text-purple-600 font-medium">¥29.9</div>
            </div>
          </div>
        </div>
        <div class="flex justify-end mt-3">
          <a
            href="../resume/list.html"
            class="ml-2 border border-purple-600 text-purple-600 px-3 py-1 rounded-md text-sm"
            >查看简历</a
          >
        </div>
      </div>

      <!-- 订单项 2 -->
      <div
        class="bg-white rounded-xl shadow p-4 mb-4 order-item"
        data-type="completed"
      >
        <div class="flex justify-between items-center mb-3">
          <div class="text-sm text-gray-500">订单号: 2023052505</div>
          <div class="text-sm text-emerald-500 font-medium">已完成</div>
        </div>
        <div class="flex items-start">
          <div
            class="w-14 h-14 bg-amber-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-7 w-7 text-amber-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
              />
            </svg>
          </div>
          <div class="flex-1">
            <h3 class="text-base font-medium text-gray-900">简历进阶优化</h3>
            <p class="text-sm text-gray-600 mt-1">
              高级AI定制，针对特定岗位量身定制简历内容
            </p>
            <div class="flex justify-between items-center mt-2">
              <div class="text-sm text-gray-500">2023-05-25 10:15</div>
              <div class="text-purple-600 font-medium">¥59.9</div>
            </div>
          </div>
        </div>
        <div class="flex justify-end mt-3">
          <a
            href="../resume/list.html"
            class="ml-2 border border-purple-600 text-purple-600 px-3 py-1 rounded-md text-sm"
            >查看简历</a
          >
        </div>
      </div>

      <!-- 订单项 3 -->
      <div
        class="bg-white rounded-xl shadow p-4 mb-4 order-item"
        data-type="pending"
      >
        <div class="flex justify-between items-center mb-3">
          <div class="text-sm text-gray-500">订单号: 2023052701</div>
          <div class="text-sm text-amber-500 font-medium">待付款</div>
        </div>
        <div class="flex items-start">
          <div
            class="w-14 h-14 bg-emerald-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-7 w-7 text-emerald-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
          </div>
          <div class="flex-1">
            <h3 class="text-base font-medium text-gray-900">精选简历模板</h3>
            <p class="text-sm text-gray-600 mt-1">
              多种专业设计模板，满足不同行业需求
            </p>
            <div class="flex justify-between items-center mt-2">
              <div class="text-sm text-gray-500">2023-05-27 09:30</div>
              <div class="text-purple-600 font-medium">¥39.9</div>
            </div>
          </div>
        </div>
        <div class="flex justify-end mt-3">
          <a
            href="../service/payment.html"
            class="ml-2 bg-purple-600 text-white px-3 py-1 rounded-md text-sm"
            >立即支付</a
          >
        </div>
      </div>

      <!-- 空状态 -->
      <div id="empty-state" class="hidden py-10 flex flex-col items-center">
        <div
          class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-4"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-10 w-10 text-gray-400"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
            />
          </svg>
        </div>
        <div class="text-gray-500 mb-2">暂无订单记录</div>
        <a href="../service/list.html" class="text-sm text-purple-600"
          >去购买服务</a
        >
      </div>
    </div>

    <!-- 底部标签栏 -->
    <iframe
      src="../common/tabbar.html"
      class="fixed bottom-0 left-0 w-full h-16 border-none"
    ></iframe>

    <script>
      // 选项卡切换
      const orderTabs = document.querySelectorAll(".order-tab");
      const orderItems = document.querySelectorAll(".order-item");
      const emptyState = document.getElementById("empty-state");

      orderTabs.forEach((tab) => {
        tab.addEventListener("click", () => {
          // 更新选项卡样式
          orderTabs.forEach((t) => {
            t.classList.remove("active");
            t.querySelector("span").classList.remove(
              "text-purple-600",
              "font-medium"
            );
            t.querySelector("span").classList.add("text-gray-600");
            const line = t.querySelector("div");
            if (line) line.classList.add("hidden");
          });

          tab.classList.add("active");
          tab.querySelector("span").classList.remove("text-gray-600");
          tab
            .querySelector("span")
            .classList.add("text-purple-600", "font-medium");
          const line = tab.querySelector("div");
          if (line) line.classList.remove("hidden");

          // 过滤订单
          const tabType = tab.getAttribute("data-tab");
          let visibleCount = 0;

          orderItems.forEach((item) => {
            const itemType = item.getAttribute("data-type");
            if (tabType === "all" || tabType === itemType) {
              item.classList.remove("hidden");
              visibleCount++;
            } else {
              item.classList.add("hidden");
            }
          });

          // 显示空状态
          if (visibleCount === 0) {
            emptyState.classList.remove("hidden");
          } else {
            emptyState.classList.add("hidden");
          }
        });
      });
    </script>
  </body>
</html>
